<template>
    <!-- <h4 style="color: #E12210;">法援覆盖情况</h4> -->
    <div id="left-t" style="width : 500px;height: 300px;"></div>
</template>

<script setup lang="ts">
    import * as echarts from 'echarts';
    import {onMounted, ref} from 'vue';
    const chart = ref();
    onMounted(() => {
        type EChartsOption = echarts.EChartsOption;

        var chartDom = document.getElementById('left-t')!;
        var myChart = echarts.init(chartDom);
        var option: EChartsOption;
        option = {
            // title: {
            //     show: true,
            //     text: '法援覆盖情况',
            //     textStyle: {
            //         color: '#E12210',
            //     },

            // },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    //dataView: { show: true, readOnly: false },
                    // magicType: { show: true, type: ['line', 'bar'] },
                    // restore: { show: true },
                    //saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['案件数量', '人员', '法律机构']
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '数量',
                    min: 0,
                    max: 1500,
                    interval: 500,
                    // axisLabel: {
                    //     formatter: '{value}'
                    // }
                },
                {
                    type: 'value',
                    name: '机构',
                    min: 0,
                    max: 60,
                    interval: 30,
                    // axisLabel: {
                    //     formatter: '{value} 个'
                    // }
                }
            ],
            series: [
                {
                    name: '案件数量',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: [
                        500, 600, 700, 800, 900, 1000, 900, 800, 700, 600, 500, 400
                    ],
                    color: '#FBE166',
                },
                {
                    name: '人员',
                    type: 'bar',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: [
                        300, 400, 500, 600, 700, 800, 900, 1000, 900, 800, 700, 200
                    ],
                    color: '#E12210',
                },
                {
                    name: '法律机构',
                    type: 'line',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: [30, 40, 50, 45, 25, 10, 20, 23, 23, 16, 12, 17],
                    lineStyle: {        // 系列级个性化折线样式
                        width: 3,
                        type: 'solid',
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#63130C'
                        }, {
                            offset: 1,
                            color: '#F59A91'
                        }]),//线条渐变色
                    }
                }
            ]
        };
        option && myChart.setOption(option);
    })
</script>